<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健力宝商品陈列检测</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary-color: #e62227;
            --secondary-color: #f8981d;
            --background-color: #f8f9fa;
            --card-background: #ffffff;
            --text-color: #333;
            --light-text-color: #6c757d;
            --border-color: #dee2e6;
            --shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .top-nav {
            background-color: var(--card-background);
            box-shadow: var(--shadow);
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

        .logo {
            max-height: 40px;
        }

        .nav-menu {
            display: flex;
            gap: 25px;
        }

        .nav-link {
            color: var(--text-color);
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            padding: 10px 15px;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-link:hover,
        .nav-link.active {
            background-color: rgba(230, 34, 39, 0.1);
            color: var(--primary-color);
        }

        .main-container {
            padding: 40px;
            max-width: 800px;
            margin: 40px auto;
        }

        .tab-content {
            display: none;
            background: var(--card-background);
            padding: 40px;
            border-radius: 16px;
            box-shadow: var(--shadow);
        }

        .tab-content.active {
            display: block;
        }

        h2 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 30px;
            color: var(--primary-color);
        }

        .upload-area {
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            padding: 50px 20px;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .upload-area:hover,
        .upload-area.dragover {
            border-color: var(--primary-color);
            background-color: #fdf6f6;
        }

        .upload-area i {
            font-size: 48px;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        .upload-area p {
            margin: 0;
            font-size: 18px;
            color: var(--light-text-color);
        }

        #file-name {
            margin-top: 15px;
            font-style: italic;
            color: var(--text-color);
        }

        input[type="file"] {
            display: none;
        }

        .submit-btn {
            background-color: var(--primary-color);
            color: white;
            padding: 14px 30px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            width: 100%;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .submit-btn:hover {
            background-color: #c51a1f;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(230, 34, 39, 0.3);
        }

        video {
            border: 1px solid var(--border-color);
            background: #000;
            width: 100%;
            border-radius: 12px;
            margin-bottom: 20px;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 8px;
            text-align: center;
        }

        @media (max-width: 768px) {
            .top-nav {
                padding: 0 20px;
                height: 60px;
            }

            .nav-menu {
                gap: 10px;
            }

            .nav-link {
                font-size: 14px;
                padding: 8px 10px;
            }

            .nav-link i {
                display: none;
            }

            .main-container {
                padding: 20px;
                margin: 20px auto;
            }

            .tab-content {
                padding: 25px;
            }

            h2 {
                font-size: 22px;
            }
        }

        @media (max-width: 480px) {
            .nav-link {
                font-size: 13px;
                padding: 6px 8px;
            }
        }
    </style>
</head>

<body>
    {% include '_nav.html' %}

    <div class="main-container">
        <div id="image-detection" class="tab-content active">
            <h2>图片检测</h2>
            <form id="upload-form" action="/predict/image" method="post" enctype="multipart/form-data">
                <div class="upload-area" onclick="document.getElementById('file-upload').click();">
                    <div id="upload-prompt">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <p>点击此处上传或拖拽图片</p>
                    </div>
                    <p id="file-name"></p>
                </div>
                <input id="file-upload" type="file" name="file" accept="image/*" required>
                <button type="submit" class="submit-btn">开始检测</button>
            </form>
        </div>

        <div id="camera-detection" class="tab-content">
            <h2>拍照检测</h2>
            <video id="video" autoplay playsinline></video>
            <button id="snap" class="submit-btn">拍照上传</button>
            <canvas id="canvas" style="display:none;"></canvas>
        </div>
    </div>

    <script>
        const navLinks = document.querySelectorAll('.nav-link[data-tab]');
        const tabContents = document.querySelectorAll('.tab-content');
        const video = document.getElementById('video');
        const snap = document.getElementById('snap');
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        const fileUpload = document.getElementById('file-upload');
        const fileNameDisplay = document.getElementById('file-name');
        const uploadArea = document.querySelector('.upload-area');
        const uploadPrompt = document.getElementById('upload-prompt');
        let stream = null;

        function showTab(tabId) {
            tabContents.forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(tabId).classList.add('active');

            navLinks.forEach(link => {
                link.classList.remove('active');
            });
            document.querySelector(`.nav-link[data-tab="${tabId}"]`).classList.add('active');

            if (tabId === 'camera-detection') {
                startCamera();
            } else {
                stopCamera();
            }
        }

        navLinks.forEach(link => {
            link.addEventListener('click', (event) => {
                event.preventDefault();
                const tabId = link.getAttribute('data-tab');
                if (tabId) {
                    showTab(tabId);
                }
            });
        });

        // Drag and Drop Logic
        uploadArea.addEventListener('dragover', (event) => {
            event.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (event) => {
            event.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = event.dataTransfer.files;
            if (files.length > 0) {
                fileUpload.files = files;
                fileNameDisplay.textContent = files[0].name;
                uploadPrompt.style.display = 'none';
            }
        });

        fileUpload.addEventListener('change', () => {
            if (fileUpload.files.length > 0) {
                fileNameDisplay.textContent = fileUpload.files[0].name;
                uploadPrompt.style.display = 'none';
            } else {
                fileNameDisplay.textContent = '';
                uploadPrompt.style.display = 'block';
            }
        });

        function startCamera() {
            if (stream) return;
            const constraints = {
                video: {
                    facingMode: "environment"
                }
            };
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(constraints)
                    .then(function (s) {
                        stream = s;
                        video.srcObject = stream;
                        video.play();
                        const { width, height } = stream.getTracks()[0].getSettings();
                        canvas.width = width;
                        canvas.height = height;
                    })
                    .catch(function (err) {
                        console.error("无法访问摄像头: ", err);
                        alert("无法访问摄像头，请检查权限。");
                    });
            }
        }

        function stopCamera() {
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                video.srcObject = null;
                stream = null;
            }
        }

        snap.addEventListener('click', function () {
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            canvas.toBlob(function (blob) {
                const formData = new FormData();
                formData.append('file', blob, 'capture.jpg');
                fetch('/predict/camera', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => response.text())
                    .then(html => {
                        document.open();
                        document.write(html);
                        document.close();
                    })
                    .catch(error => console.error('Error:', error));
            }, 'image/jpeg');
        });

        // Auto-hide flash messages
        document.addEventListener('DOMContentLoaded', (event) => {
            const flashes = document.querySelector('.flashes');
            if (flashes) {
                setTimeout(() => {
                    flashes.style.transition = 'opacity 0.5s ease';
                    flashes.style.opacity = '0';
                    setTimeout(() => flashes.style.display = 'none', 500);
                }, 3000);
            }
        });
    </script>
</body>

</html>